
import { Navigate, useRoutes } from 'react-router-dom'
import Login from '../components/Login'
import Main from '../components/Main'
import NotFound from '../components/404'
import Home from '../components/Main/Home'
import About from '../components/Main/About'
import Music from '../components/Main/Home/Music'
import News from '../components/Main/Home/News'


const routes = [
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/main",
    element: <Main />,
    children: [
      {
        path: "/main/home",
        element: <Home />,
        children: [
          {
            path: "/main/home/music",
            element: <Music />
          },
          {
            path: "/main/home/news",
            element: <News />
          },
        ]
      },
      {
        path: "/main/about",
        element: <About />
      },
    ]
  },
  {
    path: "/",
    element: <Navigate to="/login" />
  },
  {
    path: "*",
    element: <NotFound />
  },

]

export default routes;


//这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构
export const GetRoutes = () => {
  //在组件中在外层可以使用hook
  return useRoutes(routes)
}

//自定义hooks
export const useMyRoutes = () => {
  //在自定义hooks中是可以使用hook
  return useRoutes(routes)
}